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WIE 
GEMING 


حقوق نشر هذا الكتاب محفوظه لدى شركة ع«ذصءع للبرمجيات 2007 وهذا الكتاب نسخه مجانيه قابله للتداول من 
اجل النهوض بالامه العربيه والاسلاميه . 
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ان هذا الكتاب موجه الى المبتدئين بالجرافيك و كل من يرغب احتراف الجرافيك بلغة 


الدوت نت. 


1 تنائی الابعاد . 
انى الابعاة. 


الجرافيك الثنائى الابعاد بشكل عام عباره عن نظام رسم الاجسام ورؤيتها من اتجاهين فقط 
وهما الطول والعرض. 


کما ھو موضح فی الشکل : - 
والعرض والعمق . 
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قد قامت شركة مايكروسوفت بالتسهيل على المبرمجين القيام بعمليات الرسم والجرافيك , 
حيث قامت بوضع مكتبه خاصه بالرسم الثنائى الابعاد ومكتبه خاصه بالثلاثى الابعاد. 


Graphics Device Interface GDI 


ا هر ارخا اا کے ار اترو اده ا :.: 
هذه المكتبه موجوده مع الفيجوال بيسيك ولا تحتاج للتنصيب على الجهاز. 


DIRECTX 

وهى المكتبه التى قامت بعملها مايكروسوفت من اجل التسهيل على المبرمجين عمليات 
الجرافيك سواء كان جرافيك ثنائى الابعاد او ثلاثى الابعاد. 
کل اک الو ضا لطا ا من کارت وف (الموثرات الو وکارت شاشه 
(الجرافيك) والكايبورد والماوس و الكاميرات 

اواد ارت ان کت ع ر کے تھا کے اد کی عارع 
مجمو عه من ملفات الدى ال ال (D11)‏ يمكنك استخدامها من خلال الدوت نت او السى 
شارب او السی بلاس بلاس. 
اخى الكريم اود ان اقول لك نصيحه :- 
لاتفکر فی تعلم الدایرکت اکس قبل ان تتعلم استخدام الجی دی ای اولا 
اق ارک اکن م کی کا ےا ی دات ویک لی عدو اک کن 
خلال تعلمك لاستخدام مكتبة الجی دی ای . 
فالدايركت اكس عالم اخر فمن وجهة نظرى ان من لايستخدم الدایرکت اکس فلا يستحق ان 
یکون مبرمجا ابدا لان الدایرکت E‏ او ادوات 
وسیطه . 
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الفصل الاول (مصطلحات هامه) 


1. الارتفاع و العرض (Width & Height)‏ : - 


وهی عبارہ عن ابعاد الکائن فمثلا عندما تضع زر ١٥))ں8‏ جديد على الفورم فان هذا البوتن 
له مقاسات وابعاد يمكنك تغير ها اثناء التصميم كما يمكنك تغير ها اثناء تشغيل البرنامج . 


TER 


#H1dt 


Button1 


ووحدة قياس الارتفاع والعرض بالبيكسل . كما فى الصوره التاليه ك 
2. موقع الکائن (ہہزtزیsم٥)‏ : - 


کی کان د و ا ر ی ع ا ا ق ا 
ق ا E‏ اریت ار کل پرا اه 
برنامجك . 

ویتم تحدید موقع الکائنات عن طریق ما یعرف ب ( ٤م۴1‏ ) 

ماهی (۴1"۲) هی عباره عن نقطه موجوده على الكائن لها احداثيها السينى و الصادى ولا 
يمكنك رؤيتها بالعين المجرده لانها نقطه و هميه فقط يمكنك من خلالها تحديد الموقع على 
اا قر اسورد ااا رر و ت اير ا 
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1 


(zy) = (0.0) 


(120 . 100} 


{140 , 250} 


وكما هو واضح فى الصوره فان كل من الدوائر الملونه باللون اللیمونى عباره عن ()iە۲)‏ 


فكلما ابتعدت النقطه عن اعلى يسار الفورم تجد ان قيمتها تزداد وذالك لان الفورم مرکزه 
کی کی ا نط وک ر درن فر اصن کے اع ن 

فلا توجد قیم سالبه للبوینت (٤"¡ە٥۲)‏ 

فالبوینت له قیمتان یمثلان احداثی النقطه (1ہزه۴) 

القيمه XxX‏ وهى احداثى البوينت على المحور السينى كما فى الصوره (السهم الاحمر) 

اا ۲ اورف اکا ار ك لمر لادی ها تى ااصررو رال لار 

راذا كات فة اى من الأح ا السني والصادى قمة اله فان الونت كن مو قه کار ب 
الحاويه وليس داخلها . 

EEN gE N GS 
ر ای ا رعاو ف‎ 


3- الالوان (orاە€)‏ : - 
الالوان ھی احدى اکر اك الاساسه فی الرس فی الذرت نت تکام انکی ك أ وال 
و ف اس كا فصل ك لري ادن عاد اه 
ففى الدوت نت طريقتان لاختيار الالوان : - 
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1- الطريقه الاولى : 
وهی طريفة ۸68 وهی اختصار الى 
Red‏ احمر 
Green‏ اخضر 
Blue‏ ازرق 
لماذا الالوان الثلاثه ؟؟؟؟ 
اخى الكريم هذه هى الالوان الاساسيه واللتى يمكنك من خلال الخلط بينهما من تكوين الالوان 
الأخر ر م انك وال دومرف الى 


وذالك من خلال تعيين او تغيير درجات الاضاءه لكل منهما ,فكل ماهو ظاهر على الشاشه 
اماما الان من الوان عباره عن خلبط الالوان الثلاثه هذه . 
وهذا ماستعرفه بالتفصيل فى الدروس التاليه ان شاء الله . 

2 - الطريقه الثانيه : 
وهی اختيار الالوان الموجوده مسبقا بدون تدخل منك فی تکوینها وهی موجوده اساسا مع 
الدوت نت . 


3. المتغير العام : 


فانك لاتفكر فى استخدام 61 الا اذا كنت تجيد التعامل مع المتغيرات واستخدام لغة الدوت 
نت . فلن اتطرق الى شرح المتغيرات فهذا ليس مجال الشرح وانما اردت ان انوه فقط قبل ان 
ندا مع أن تصرف ارلا على كفا التعامل مع المتغر ات من اخدى البضادر العامة 
الاخرى . 
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قل انا کی کا رل کد برع رم ارت ت بج ان قفرا هاقلن ر 
افرغ تفكيرك من البرمجه الان بمعنى حاول ان يكون تركيزك الان خارج عالم البرمجه 
والكومبيوتر بشكل عام , واقرأً فقط وفكر وركز جيدا فيما تقرأه. 

لانك الان لن ترسم بالكومبيوتر ولا الماوس , انت الان سوف ترسم معى على الورق . 

ن آل انك فت دارم غل ار س فل ف کے ہرک کل کے ادر ت 
,او انك قمت برسم شکل کاریکاتیری 

فالنفترض انك کنت ترسم شکل هندسی مثلا وکنت ترسمه فی کشکول المدرسه او حتی فی 
اده الخاضة وك 

انت کرس د ری کی ص ااال وھا قل ما کت تر الق اا 
بالرسم قلم رفيع متلا او قلم ذو راس غليظه قليلا لقد قمت بالرسم اذا وترغب فى تلوين الرسم 
فتقوم بفتح علبة الالوان وتختار الفرش للتلوين 

هکذا انت انجزت مهمتاتك 

وهی رسم الدائره او الشكل المطلوب. 

فا ماتا ق ف ارم ت ارت فوخ الال که اك 


انلك سوف ترسم على الورقه . 
انك حددت الاقلام التى سوف ترسم بها على الورقه. 
حددت الشكل الذى سوف تقوم برسمه على الورقه. 
4- التلوین . 
اعتقد انك الى الان لم تجد اى صعوبه فى هذا الكلام فالمثال عادى جدا ومن منا لم يقوم بهذا 
العمل من قبل . 
الان ارجع معى الى الدوت نت واهم شىء انك ركزت جيدا فى قراءة المثال لانه سوف يكون 
عون لك فی استخدام مکتبتی مایکروسوفت (GDI And Dir ec)×(‏ 
فهذا المثال هو القاعده الرئيسيه لاستخدام هذه المكتبات . 
دعنا الان نبحر فى عالم الجرافيك ونبدا فى كتابة اول كود . 
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الرسم فى الدوت نت 


اخى الكريم لقد قرات المثال السابق والان نريد ان نطبق المثال السابق معا ولكن ليس على 
الورق وانما بالاکواد 
فلندع الكومبيوتر يقوم بالرسم من خلال اوامرنا له وكتابة الأكواد :- 


أنواع الرسومات التي توفرها لغة البرمجة الدوت نت . 
ش (طرة الاشكال فى الدوت نت)٠‏ 

انواع الاقلام ( ع٥‏ ) 

- انواع الفرش ) Brush‏ ( 


ففى المثال نجد ان اول نقطه فيه هى تحديد الورقه او الكشكول اللذى سترسم فيه او عليها 


والان ليس لدينا ورق لنرسم عليه ولكن لدينا : 

Desktop 
Screen 
Form 
Button 

List Box 

Picture Box 

Textbox 

Image 


انا ان هذا ا یتبادر فی ذهناك الان 1 

فكل کائن موجود على الشاشه او اى كائن تراه الان على شاشتك له رقم فريد للتعامل معه 
سواء من خلال برنامجك او من خلال نظام الويندوز وهو ما يعرف بالمقبض(ءال,81) 
ولغة الدوت نت توفر لك الوصول الى مقبض اى كائن من خلال الكود التالى : - 
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Form1.Handle 

وهو كلاس يعطى قيمة رقميه للكائن (الفورم) 
كما يمكنك تحدید مقبض اى كائن اخر موجود فى النظام ويندوز والتعامل معه . 
اذا فالعملیه سهله جدا والان يمكنك تحدید السطح الذى سترسم عليه 
ولكن اناالى الان لا اعرف كيفية الموصول۔ الى مكتبة المجى دی۔ ای حتی اقوم 
الر EEE‏ 
یمک ان تسل الک آلجی کی آے من خادل :: 

System. Drawing 
-: الان قم بتعريف متغير عام باسم ه64 حتى يكون هو السطح الذى سترسم عليه‎ 


Public Gra As System.Drawing.Graphics 


انت الان قمت بتخصيص متغير من النوع جرافيك ولكن يجب ان تحدد له الكائن الذى 
ترغب فى الرسم عليه وليكن متلا الفورم 
وال ھن کال الکره اللي + 


Public Gra As System.Drawing.Graphics = Gra.Fromhwnd (Me.Handle) 


هنیئا اخى الكريم انت الان اصبح لديك الورقه التى سترسم علیها وهى الفورم اذى حددته 
ويمكنك ايضا الرسم على زر ١0))ں8‏ ولاكن يجب عليك ادراجه اولا على الفورم ثم كتابة 
هذا الكود :- 


Public Gra As System.Drawing.Graphics = Gra.Fromhwnd (Button1.Handle) 


يمكنك حجز اكثر من سطح على الفورم للرسم عليه 
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کا رد ت اد مرن ار مات اتے فطا دق لے اتا عة رافک و 
الرسومى وهذه الرسومات تتمثل فى : - 


Ellipse دائرة أو شكل بيضاوي‎ 
Rectangle 
Curve 
Arc 
Line 
Polygon 
Image 
String 


والان كيف تصل الى كود رسم هذه الاشكال وكيفية التعامل معها وتغير احجامها : 


1- دائرة أو شکل بيضاوي : 


قم بحجز متغير من النوع جرافيك (سطح الرسم ) 


Public Gra As System.Drawing.Graphics = Gra.Fromhwnd (Me.Handle) 
: قم بكتابة هذا الكود فی ای حدث وليكن فى الحدث (٤,1ه۴) للفورم على سبيل المثال‎ 


Gra.Drawellipse (Pens.Blue, 0, 0, 120, 120) 


والان شغل البرنامج بالضغط على مفتاح ۴5 من الكايبورد سترى ان الفورم قد تم الرسم عليه 
والشكل المرسوم هو الدائره باللون الازرق و ان مكان الرسم 

الاحداثى (0,0) من سطح الرسم (الفورم) 

وان حجم الدائره طول وعرض (120,120) كما فی الكود . 


اسه 
عند كتابتك .]6 بعد الدوت سترى فضائيات الرسم على السطح والان اريد منك ان تتجول 
وتر ئ الاشکال الت توف رها لك الدوت نت والتئ سبق 
ذکرها 
Gra.Drawellipse‏ 
وعند تجولك لهذه الفضائيات ستری ان ندح الدائره (Ellipse)‏ مذکور مرتین بهذا الشكل : 


Gra.Drawellipse 
Gra.Fillellipse 


کار تی ر اکال کے الست وی کل مر کا کی الان اسان رمه 
الدائرە(aWإ5)‏ . 
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اما الثانيه فتعنى رسم الاشكال على السطح 64 بطريقة الملئ (۴111) . 
وهاتان الطريقتان سوف نتعرف عليهما بالتفصيل فى الدروس التاليه (الفصل الثالث) 

ارید ان الفت نظرك الى انك اذا رغبت فی رسم شکل بیضاوی فانك ستسخدم نفس کود رسم 
الدائره ولكن عرض الدائره فى الكود لا يتساوى مع طول الدائره كما فى الكود التالى : 


Gra.Drawellipse (Pens.Blue, 0, 0, 120, 80(‹ 


المستطيل او المربع (ءاعورو)cءءR)‏ 


لقد تعلمت کیف ترسم دائره وتعرفت جیدا على كود رسم الدائره اما الان فانك سوف ترسم مستطیل 
(Rectangle)‏ 

فانت تعرف جيدا ان المستطيل يتكون من ضلعين غير متساويين فلو تساوى ضلعى المستطيل 
لتحول المستطيل الى مربع . 

فلنری کود رسم المستطیل : 

طبعا اول خطوه هى تحديد السطح الذى سترسم عليه : 


Public Gra As Graphics = Gra.Fromhwnd (Me.Handle) 


وتانی خطوہ ھی کتابة کود الرسم فی مکان حدث اجراء الرسم ولیكن لديك بوتن (۸٥))ں8)‏ على 
سبيل المثال واكتب هذا الكود فى حدث الضغط على البوتن متلا 


Gra.Fillrectangle (Brushes.Black, 0, 0, 100, 200)‏ 
اعتقد انك لا ترید شرح الود فهذا الکود انت تعرفت عليه فی كود رسم الدائره 
ولکن یوجد اختلاف وهو ان فی کود رسم الدائرہ قمت بتحدید الرسم بالقلم (Wھإ5)‏ اما هنا فی 
رسم المستطيل فان طريقة الرسم هى الملئ (طوں81) . وسوف تتعرف على كيفية استخدام هذه 
الطرق فى الدروس التاليه بأذن الله . 
3- رسم قوس )Arc(‏ 


الان اخوتى سوف نتعلم كيفية رسم قوس 

انت طم خد إن انرس هو نصف دائره او جزء منها وانما ليس بدائره , اليك الان كود لرسم قوس 
علی السطح 1 فی الاحداثی (0,0) من السطح 1 

وارتفاع وعرض القوس يساوى (200,200) ويمكنك تغيير هذه القيم لترى الفارق 

وتاثير قيمة الارتفاع والعرض . 


Gra.Drawarc (Pens.Black, 0, 0, 200, 200, 360, 180)‏ 
اما القيم 180 و 360 فهما قيمتان يمثلان درجة دوران القوس من اول نقطه للقوس الى نقطة 
نهاية القوس . 
فلو جربت البرنامج الان بهذا الكود ترى ان القوس يأخذ شكل نصف دائره تماما وهذه لان قيم 
الدوران هما 360 و 180 . 
يمكنك كتابة الكود من جديد وتغيير هذه القيم وتعرف على الفارق بنفسك . 


يمكنك التواصل معنا من خلال Alaa_gomaa2009@ yahoo.com‏ 


28 12 
اما اذا کانت قیمتی الدوران یساوی (360,360) فالقوس یصبح دائره ولیس قوس . 


4- رسم المنحنی (ع٤Cury)‏ 


150 


1 1 
la Û 141 10 


انی ارى انك الان ستبدا تفهم بشكل اسهل عندما تنظر الى هذه الصوره . 
ماذا تری : 

« انك ترى منحنى باللون الابيض 

« انك ترى نقاط صفراء تقع على المنحنى 

# انك تری احداثی سینی واحداثتی صادی 
اعتقد انك تفهمت الامر جيدا 

والان كيف يمكنك القيام بهذا العمل : 


فى لغة الدوت نت يوجد مايعرف بالبوينت )P01(‏ وهو يعنى النقطه وكما ذكرت فى بداية الكتاب فى 
الفصل الاول ان البوينت لها احداثيان (سينى , صادى) وهذا الاحداثى هو الذى يحدد موقع النقطه 
على السطح الذى ترسم عليه . 
کیف تنشئ نقطه فی الدوت نت 
یجب ان تحجز متغیر من النوع بوینت (¡ه۴) . 
Dim Po1 as New Pointf (500, 300)‏ 
عندما تقوم بحجز المتغیر ۴٥1,‏ تجد ان الكلاس يحتوى على نوعين من البوينت 
Point‏ 
Pointf‏ 
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والفرق بینهما هو ان الاولی عباره عن نقطه واحده اما الثانیه فهی عباره عن مصفوفه من النقاط يتم 
حجزها وستعرف الفرق الان عند كتابة كود رسم المنحنى . 

ففی کود تعریف البوینت تری ان احداثی النقطه هو (500,300) وھذا ھو الاحداثی (س , ص) کما 
فى الشكل الموضح لرسم المنحنى . 

وفى الشكل التوضيحى لرسم المنحنى تجد العديد من النقاط التى يقع عليها المنحنى 

الان لا نكتفى بوضع نقطه واحد فقط فلنضع عدة نقاط : 


Pol New Point (500, 
Po2 ew Point (600, 
Po3 New Point (200, 
Po4 ew Point (100, 
Po5 New Point (550, 
Po6 New Point (501, 
Po’ New Point (510, 


الان لقد قمت بتحديد النقاط التى يقع عليها المنحنى دعنا الان نكتب كود رسم المنحنى لنرى 
بساطة وسهولة هذا الكود والذى يخفى علينا العديد من السحر والخيال فى الرسم والتى سنتعرف 
عليها فى الجزء الثانى من الكتاب ( تطبيقات 651) بأذن الله : 


Dim Curvepoints As Pointf() = { Po1, Po2, Po3, Po4, Po5, Po6, Po7} 


Gra.Drawcurve (Pens.Blue, Curvepoints) 


السطر الاول عباره عن حجز hمتغڍر‏ ) (curvepoints‏ من النوع بوینت لکن یحتوی مجمو عة النقاط 
السبعه التى قمت بتعريفها . 
والسطر الثانى هو كود رسم المنحنى اعتقد ان السطر الثانى لا يحتاج لشرح تفصيلى فكل ماعليك 
فعله فى هذا الكود هو تحديد الرسم(منحنى ) ولون المنحنى (ءں1ه.:,٠<)‏ ومصفوفة النقاط التى 
حجزتها لرسم المنحنى . 
1 
بس هذا الكود كما قلت يخفى خلفه العديد من المزايا وستعرفها من خلال تطبیقاتى فى الدوت نت جى 
دی ای . 


5- رسم خط مستقیم( مeہiل)‏ : 


مفیش اسهل من کده فى برمجة الرسم 
الخط المستقيم عباره عن نقطتین بدايه ونهايه (و٤ہه2۴)‏ وکل بوینت له احداثی (س ,ص) 


الخط المستقيم 1 


Gra.Drawline (Pens.Blue, X1, Y1, X2, ¥2) 
Gra.Drawline (Pens.Blue, 20, 20, 200, 20) 
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کلما زادت قیمتا (۷2 , 2×) عن القیم (۲1 , 1) کلما زاد طول الخط المستقیم بنفس مقدار الزیادہ 
فى القيم الثانيه . 


جرب الکود وحاول تغییر هذه القیم فی کل مره لتری الفارق . 


6 - الشكل المضلع («معراه۲٥)‏ 


الشكل المضلع عباره عن اى شكل هندسى غير متساوى الاضلاع وغير محدد عدد اضلاعه 


الكل المضلم كما فى الصرره آمامت فالنكل المخل لانترى على غود مين من الرؤوسش 


فاشك اللذى امامك الان يتكون من اربعة روؤوس (نقط ) 


سال جا کل ھا عت ھر ان تة الفط ای بے علا کل ر اس فن رورس المضل كما 
الصوره . 
تانع معي المتال الالى ارس الشكل النضلع كما فى السوره: 
٠‏ اولا : يجب عليك تحديد نقط او رؤوس المضلع 
Dim P1 As New Point (100, 200)‏ 
Dim P2 As New Point (120, 240)‏ 


Dim P3 As New Point (200, 100) 
Dim P4 As New Point (100, 150) 


ا و ك ا 
واا ی ر شی کی ا ا 
ا م و ا 
Dim Pof As Pointf() = {P1, P2, P3, 24}‏ 


ه ثالثا : رسم المضلع على السطح الذى حددته وبالنقط التى اخترتها 
Gra.Fillpolygon_‏ 
(Brushes.Blue, _‏ 
BOF‏ 
Drawing2D.Fillmode.Alternate)‏ 


السطر الارل عباره عن رسم المضلع على السطح (Gra)‏ الذى قمت بحجزه مسبقا . 
السطر الثانى عباره عن لون الفرشاه ( الازرق) او لون الملئ . 
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السطر الثالت عباره عن مصفوفة النقط التى نرسم بها المضلع 

السطر الرابع وهو عباره عن نظام رسم المضلع وتوجد طريقتين لرسم المضلع اولى رسم 
المضلم نظ م الك لذبب و اللاتى الخ الت 

وستتعرف على الفارق حين تجربتك لكود الرسم . 

جرب الان وشغل البرنامج . 


7 زس ارصن ار اة S1167‏ 
نت تتعجب الان عن رسم النصوص وتتسأل لماذا نرسم نص او كتابه معينه 
سو فا کیرک علے امز کمن غدل الجزء الثانى من هذا الكتاب (تطبيقات الجی دی ائ ). 
وتستخدم رسم النصوص والكتابات فى انشاء تدرج مسطره متلا 
او ارقام ساعه او غير ذالك 
والان نتعرف على كيفية رسم النصوص . 
)FON1(‏ والڵلون )٥C0⁄LOR)‏ . 
فل ان ترش التضن يجب ان تحك الحجة زالترع واللرن و الو( ©۲741 ,5ا80 
UNDERLINE‏ ( 
وذالك بحجز متغير من النوع خط : 
Dim F As New Font _‏ 
("Times New Roman",‏ 
O‏ 
Fontstyle.Bold, _‏ 


Graphicsunit.Millimeter, _ 
1) 


السطر الاول هو حجز المتغير من النوع خط واسمه (۴) 

السطر الثانى عباره عن اسم الخط ويجب ان يكون موجود بالجهاز لديك 

السطر الثالث عباره عن حجم الخط وهو عشره (10) 

السطر الرابع وهوعباره عن المؤثرات على الخطوط فانت تعرفها ولا تحتاج لتوضيحها . 
السطر الخامس والسادس وهو وحدة قياس حجم الخط بالنسبه للشاشه والافضل ان تختار 
الميللىمتر(إ 11:٠٤٠‏ :) الوحده الاساسيه وسوف نتعرف على الوحدات هذه فى التالى 
من الدروس ان شاء الله , 

الان يمكنك رسم النصوص كما تشاء : 


Gra.Drawstring ("Alaa Gomaa", F, Brushes.Blue, 100, 100) 


Gra.Drawstring( _ 
"Alaa Gomaa" _ 
,F, _ 
Brushes.Blue _ 

7 LOO 100) 
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السطر الاول هو السطح الذى سترسم عليه ونوع الرسم (رسم نصوص ) Drawstring‏ 
السطر الثانى فهو النص الذى تريد رسمه اكتب ماتشاء . 
السطر الثالث عبار ه خصائص الخط الذى ترید رسمه والتی حجز ت متغیر من النوع 
(Font)‏ . 
السطر الرابع هو لون الخط الذى تريد رسمه (الازرق) 
امالس كر و عا دع ك اكا اس 
هكذا انت قمت برسم النصوص . جرب البرنامج 
8 - الرسم الصور (ععٍ2۾"!) 
الان سنتعرف على كيفية رسم الصوره علی ای سطح تقوم بتحدیده تتبح معی 
المثال التالى : 
اولا يجب عليك حجز متغير من النوع صوره ( 8٥81)" 4p‏ 0۲ مععه2"] ) هذا المتغير هو 


عمل دوران للصوره او تغيير الوان الصوره مثلا 
ا ع ك ال اك عا 
يتم حجز المتغير )81 كالتالى : 
Dim Bit As New Bitmap ("E:\7.Jpg"‏ 


هذا المتغير يحمل مسار الصوره من الجهاز (على الهارد ديسك ) 
ثانيا تتم عملية الرسم كالتالى : 


Gra.Drawimage (Bit, 0, 0, Bit.Width, Bit.Height) 


Gra.Drawimage (Bit, _ 
0, O0, _ 
Bit.Width, Bit.Height) 


السطر الاول هو تحديد السطح واختيار الرسم عليه من النوع رسم الصوره وبعد القوس 
نكتب اسم المتغير الذى يحمل اسم الصوره الذى سبق حجزه من النوع pھم)¡۵8‏ . 
السطر الثانى يحمل متغيرين ويمثلان موقع الصوره على السطح حدد الموقع الذى تراه مناسبا لك . 
اما السطر الثالث فهو عباره عن حجم الصوره على السطح من طول وعرض 

اكب اثر تر المتانت لك 

کی ن ا اکر ت اک او الح ا ورن 

انت تمت يرن الضور د على السطح رين اتقات اماطر المج وخل 
ال راقعل الصرر ف ا هكن ن ها اه لیرد اى من الاب اينات الح 
دی ای) . 

اذا ارت ان تقوم بعمل دوران للصوره فيجب ان تكتب الكود التالى قبل رسم الصوره على 
ا 


Bit.Rotateflip (Rotatefliptype.Rotate270FlipXY) 


ریا الك راع دة لكرز ان مرا ءقرران تاكاه عقارب الساعة او الكن وك إن 
تجرب الکود وتختار ای نوع من الدوران تريده . 
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هذا اخوانی قد قطعنا شوطا كبيرا فى التعرف على معظم الرسومات التى توفرها لنا الدوت 
نت ولكن يبقى القليل منها مثلا : 


Pie‏ دائره ذات مقطع ناقص 
Bezier‏ المنحني 


Icon 


Closed Curve 
: الجزء الاهم فى الرسومات وهو‎ 
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ماهو الفرق بين الفرشاه والقل ؟؟؟ 
القلم يستخدم فى الكتابه او الرسم فقط ( Draw‏ ( 
اما افر شاه فشددخهم: الرس د ارين فى فى الر تت ال إو الملىء 


يجب عليك حجز متغير عام من النوع قلم ومتغير اخر من النوع فرشاه قبل الاستخدام , 
وذالك لاستخدامهما فى الرسم على السطح السابق حجزه فى ليصبح الكود بهذا الشكل : - 
Public Gra As System.Drawing.Graphics = Gra.Fromhwnd (Me.Handle)‏ 


Public Pen As New System.Drawing.Pen (Color.Darkblue, 2) 
Public Brush As New System.Drawing.Solidbrush (Color.Black) 


ان اض فى بر امك تة متفر اك هامة ر اسامهه رفانت عرفت مسقا على لكر ف 
السطر الارل ( حجز متغير بالسطح ) 


* اما الكود فى السطر الثانى وهو حجز متغير من النوع قلم والذى سوف يستخدم فى الرسم 
وعند كتابتك للكود هذا سوف تجد ان المتغير القلم له اثنان من المعطيات 

الاول وهو يمثل لون القلم الذى سترسم به 

والتانى وهو يمثل سمك القلم ويقاس سمك القلم بالبيكسل وهنا فى هذا المتال حددنا سمك القلم 


الى 2 بيكسل. 
اما الكود فى السطر الثاالث فقد قمنا بحجز متغير من النوع فرشاه وهى فرشاه عاديه اللون 


S0114 Brush)‏ )توجد انواع عدیدة من الفرش 1 وفیها متغير واحد وهو لون الفرشاه 
وقد اخترت اللون الاسود للرسم والتلوين . 
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Hatch Brush 

Linear Gradient Brush 
Path Gradient Brush 
Solid Brush 

Texture Brush 


كيفية التعامل مع هذه الفرش واستخدامها ٠‏ 
Hate Brush‏ فرشاة التلوين الرسو 


وهى احدى انواع الفرش التى توفرها لغة الدوت نت وتحتوى هذه الفرشاه على العديد من 
الأشكال ألمزخرفه تصل إلى أكثر من خمسين شكل كما فى الصور التى امامك . 


ألان نقوم بأول عملية رسم : - 


قم بتعريف السطح وتحديده : 


Public Gra As System.Drawing.Graphics = Gra.Fromhwnd (Me.Handle) 
قم بتعر يف الفرشاه وشكلها‎ 


Public Bru As New_ 
System.Drawing.Drawing2D.Hatchbrush ( 


1 Color.Indianredğfcolor.Aquamarinej 
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الاول وهو اللون الإصفر وهو عباره عن نوع الزخرفه التى ترغب الرسم بها ومن خلال هذا 
امعط مكلك الأخار من فن الاشكال المر خر نه ال تراه امامف ( اک من خمسین دل 


( 
اما المعطى الثانى فهو اختيار لون الشكل ليتقاطع مع اللون المختار فى المعطى الثالث . 
ويمكنك اختبار أحد الالوان التى توف ر ها لك لخة البرهجهة. 


اعتقد انك لن تستو عب الا بعد التطبيق 


قم بکتابة کود رسم دائره على سبيل المتال فى حدث الضغط على البوتن متلا : 
456G F7‏ 3 2 1 


Gra.Fillellipse (Bru, 0, 0, 200, 200) 


[ ےك E RS‏ 
2- وهو الر E‏ نى توفره لك لغة البرمجه الدوت نت . 


وتلاحظ انه في المقطع رقم اثنين تم اضافة ( ۴11) وهذا ليدل على ان الرسم سيتم بطريقة 
الملیء باستخدام ( Brush‏ ) . 

أما لو كانت ( سه5 ) فانك ستسخدم القلم فى الرسم وليس الفرشاه . 

3 - وهى تحديد الفرشاه التى سترسم بها وفى هذا المعطى يمكنك اختيار لون من الالوان 
الافتراضيه المورجوده بالذؤت نتا , كما يمكنك اختيار الفرشاء المناسة لك ر التى قمت بحجز 
مغیر عام بخصائصھا ( hوuإBr‏ ) . 

4 -المجزئان_ المرابع والمخامس و-هما الملذان۔ يختصان بتحديد موقع المرسم على 
السطح(١٥1)10وه۴)‏ ويمكنك تغيير هذه القيم بما يتناسب مع رسمك . 

5 - الجزئان السادس والسابع وهما اللذان يختصان بتحديد حجم الدائرة أو إبعادها ألمرسومه 
من ارتفاع و عرض ۷ , × وهما يمثلان القيمه 200 فى هذا المثال 

(200, 200) ويمكنك تغيير هما لتعرف الفرق . 

الان اخى الكريم يمكنك الرسم بطريقة الملیء ( ۴11 ) او الفرشاة (طئuا8)‏ 


Linear Gradient Brush . 2‏ فرشاة التلوین الذ 


وهی احدى فرش الرسم التى توفر ها الدوت نت للمبرمجين وهى فرشاه تقوم بملئ الرسم 
بلونین متداخلین فی شكل خطى . كما فى الشكلين التاليين 
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© اولا: 
کما تعو دنا یجب ان نقوم بتخصيص او تعريف السطح الذى نرسم عليه 
Public Gra As Graphics = Gra.Fromhwnd (Me.Handle)‏ 
6 ٿانيا : 
یجب ان نقوم بأختيار الفرشاه التى نريد الرسم بها وهی من النوع Linear Gradient‏ 
وذالك بحجز متغير من النوع فرشاه ونخصص نوع الفرشاه المقصوده 


Dim Bru As New _ 
System.Drawing.Drawing2D.Lineargradientbrush( _ 
New Pointf(0, 10), _ 

NEW POILREE (IO0; 20) 

COLOE: BLACK, 

Color.Azure) 


السطر الاول عباره عن اسم الفرشاه 
السطر الثانى عباره عن نوع lلفرشoİ Linear Gradient‏ 
السطر الثالث عباره عن النقطه الاولى للفرشاه وعليك ان تختار اى ارقام لتجرب 
وترى الفارق . 
السطر الرابع عباره عن النقطه الثانيه للفرشاه . 
اما السطر الخامس فهو لون ملىئ البدايه (النقطه الارلی ( 
السطر السادس عباره عن لون ملئ النهايه (النقطه الثانيه ) 
ثالثا: 
الان عليك ان ترسم اى ما تريده وتستخدم فرشاة التلوين التى حجزتها فى المرحله الثانيه 
(Bru)‏ . 
ر روط ا ن ف ی ر ر ا 
التالى 


الکود واضح جدا ومش محتاج لای شرح . 
شغل البرنامج الان وجرب امر الرسم لترى تاثير الفرشاه على الدائره التى رسمتها . 
Gradient Brush - 3‏ ط٤‏ فرشاة التلوين بالرسومات الجرافيكيه 
ا کا ا ےی ا کے کا ا کے اروا ا 
توفرها لك الدوت نت من مربع ودائره وخطوط ومستطيلات والشكل المضلع 
انظر لهذه الصور لترى : 


Gra.Fillellipse (Bru, 0, 0, 100, 100) 
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A«xX 


تری بهذه الصور ان کل منها يحتوى على عدة الوان 

ولكن لو دققت اكثر وتفحصت جيدا هذه الصور ستجد فيها الاشكال التى ذكرتها منذ قليل 
والتى توفرھا الدوت نٽ ) Etc, Lines , Ellipse, Rectangle, Polygon‏ ( 

فالشکل رقم اثنین عباره عن دائره مرسومه ولکن ملونه بدائره اخری باللون الازرق . 
يمكنك رسم مستطیل مثلا مکان الدائره الزرقاء او التلوین بای شکل رسومی اخر تریده . 

اما الشكل الاول وهو النجمه فهو عباره عن مجموعة خطوط متقابلة الراس 

وتم تلوينها بالوان مختلفه . 

اعرف انك الان متشوق جدا للتعرف على كيفية التعامل مع هذه الفرشاه العجيبه والجميله 
.سنتعرف عليها من خلال المتال التالى : 

اولا ۽ 


حجز متغير من النوع طاةم وsءاطمهإ6‏ وهو متغير يحمل الشكل الرسومی الذى تريد 
التلوين ڊ4 ) Etc, Lines , Ellipse, Rectangle, Polygon‏ ( 
وتحديد حجمه وموقعه على الرسومات . 


Dim Path As New Graphicspath () 
Path.Addellipse (0, 0, 200, 100) 


طبعا بالتأكيد انت تعرف الكود جيدا فالسطر الاول يحتوى على اسم المتغير طاه٣‏ ونوع 
lئnتغıر Graphics Path‏ . 

اما السطر الثانى فيحتوى على الشكل الذى تقوم بالتلوين به موم:11ءمههة وايضا موقعه 
وحجمه , 


حجز متغیر باسم الفرشاہ التی نرید التلوین بها وهی من lلiو‏ ع Pathgradientbrush‏ 
وهذه الفرشاه هی التى تحتوى على الشكل الرسومى الذى تم حجز متغير باسمه ( طat٥۲)‏ 
وسیکون الکود کالتالی : 

Dim Pthgrbrush As New Pathgradientbrush (Path) 
مكذ ف مت اء الفر شاد قى ففط ان تار الالران المناسه لك‎ 

هذه الفرشاه تحتوی على لونین متداخلين اللون الاوسط (0اە€ 6۲اه )واللون 

المحيط ڊ4 (Surround Color)‏ 
زیکین ان کک کل ذ کمن کال خضصاس افر اء لئے فع نخ مقر اعا 
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Pthgrbrush 
: فلنتبع الكود التالى‎ 


Dim Bluecolor As Color() = {Color.Blue} 


Pthgrbrush.Surroundcolors = Bluecolor 
Pthgrbrush.Centercolor = Color. Aqua 


السطر الاول يحتوى على مغير من النوع إ0[ه٥‏ يحمل اللون الاوسط فى الشكل الرسومى 
او فی التلوين . 

السطر الثانى وهو خاصية اه٣‏ 4ل«u١٥إإںS‏ وهى اللون المحيط وقد نسبنا اللون الذى 
حجزنا متغیر باسمه . 

السطر اقات كى ع ان اسف این ركف ان کک ف د اا فا 
اللون كانك تضئ مصباحا متل 

او مثلا عندما تقف على الزر بوتن تجد ان الزر تحول لونه او شكله وهذا ما يمكنك ان تفعله 
انت بنفسك بهذه الخاصيه عند استخدامك هذه الفرشاه الجميله . 

ار ااا ف تة ا ا و ال کے ار ر اف الى 
الفرشاه , بقى التنفيذ او تلوين ما نرسمه بهذه الفرشاه لترى الجمال والسحر : 


Gra.Fillellipse (Pthgrbrush, 0, 0, 200, 200)‏ 
فى هذا الكود سنقوم برسم دائره على النقطه (0 و 0 ) بحجم ( 200 و 200 ) على السطح 
الذى تقوم بحجز ه (612) وسنقوم بتلوين الدائره بالفرشاه التى حجزناها فى المرحلتين 
lndlبقتيj Pthgrbrush‏ . 
اعتقد ان تعرفك على الکود سهل جدا ولا يوجد به ای تعقیدات . 
سروف ان اء اکل ا اض هھ دار اء ن خا تات الک دیآ 
الجزء الثانى من الكتاب . 

Brushn.4‏ 4اد فرشاه عاديه احادية اللون 

ذه الفرشا العاتيه ذات اللون ال ر احد رق م وان اتتخدماها فى الأروس الساة افر 
اكل ١‏ ازیو مات ف ارت دت کا فى الصرز: غل مول الال 


يمكنك التواصل معنا من خلال Alaa_gomaa2009@ yahoo.com‏ 


تعلم 651 فى الدوت نت 28 from‏ 24 


r exture Brush.5‏ فرشاة التلوين بالصور 


هذه الفرشاه تستخدم فيها صوره للتلوين 

سنرى هذا المتال لتتعرف اكثر واحیانا تستخدم هذه الفرشاه فى تصميم نوافذ ذات مظهر 
لی تع نے ها ن 

بم ان الفرشاهہ نستخدم فیها صوره للتلوین اذا لا بد من وجود صوره على جهازك ویجب 
عليك حجز متغير من النوع صوره (ص81).۵) هذا المتغير يحمل مسار الصوره على 


الجهاز . 
Dim Bit As New Bitmap ("E:\2.Jpg")‏ 
کما هو واضح فی الکود ان اسم المتغیر ()8) نو عه(م )81 )ومکانه فی 
الجهاز ر (FENA OpBO"‏ 
اما الان یجب ان تقوم بتعریف الفرشاه من النوع Texture Brush‏ وذالك بحجز متغير 
من النوع فرشا الرس بlلصر Texture Brush‏ : 


Dim Bru As New System.Drawing.Texturebrush _ 
Bit _ 


,Drawing2D.Wrapmode.Tile 


New Rectanglef (0, 0, 50, 50))‏ , 
السطر الاول عباره عن اسم المتغير من gillع‏ فرol Texture Brush lqع gi‏ 
السطر الان عازه عن اسم المتغير الذى تم حجزه مسبقا وهو الصوره (Bit)‏ 
السطر الثالت عبار ه عن طريقة عرض الصوره اثناءِ التلوین(صp:ا۴)‏ وهی عبار ه عن خمسة 


اوضاع لعرض الصورە اثناء اlتذوين Tileflipy s Tileflipxy s Tileflipx , Tile , Clamp‏ 
الوضع الاول وهو (م_ه1٣)‏ ان تکون الصورہ کما هی بدون تصغیر او عمل دورانات او ای 
عملية قلب للصوره ( ما۴) او تجانب وسوف تتعرف عليها اكثر عند تطبيقق للمتال . 
السطر الرابع عباره عن الجزء الذى تريد التلوين به فى الصوره بداية من نقطة الصفر 
( 0و0) ويتم اختيار الجزء المستقطع على شكل مربع او مستطيل (عاعمه)ءم۸) وهنا فى 
المتال نختار مثلا الجزء (50و50) ويمكنك ان تختار ماتشاء . 
الان دعنا نرسم دائره بحجم (200و200) من النقطه (0و0) من سطح الرسم (۲۵ع)ونملاها 
بالوان الفرشاه التى اعددناها ٠‏ 


gra.FillEllipse (bru, 0, 0, 200, 200) 

جرب البرنامج وشاهد الدائره وهى ملونه بالصوره بالشكل المتجانب (ء])1) ويمكنك ان تغير 
طرق عرض الصوره داخل الفرشاه لتتعرف على طرق العرض . 

ون لن 

2F OF 2F 2F 2F 2F 2F 2F 2F AF 2F 2F 2F FF AF 2F FF 2F 2F OF AF 2F 2F AF AF 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 2F 

الى هنا قد انتهينا من التعرف على جميع انواع الفرش التى توفرها لك الدوت نت وتوجد بعض 
النقاط المتقدمه سنتعرف عليها بأذن الله , وكل ماعليك الان هو الابداع والابتكار , فقد تعرفت 
على الخطوط الرفيعه والتى تسير عليها لتصبح مبرمجا جرافيكيا . 
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اخى القارئ الفاضل , لقد تعرفت مسبقا على كيفية حجز متغير من النوع قلم وكان الكود بهذا 


الشكل : 

Public Penl As New System.Drawing.Pen (Color.Darkblue, 10)‏ 
وتعرفنا على الكود وعلمت ان القلم اسمه (۸1عم) ولونه هو مں1ط×عهط وسمکه 10 بیکسل 
هذا القلم يستخدم فى الرسم العادی اى الخط العادى 


كما هو واضح فى الصوره فانه تم رسم مربع (عاعمه)ءع) بالقلم ذات الحجم 10 بيكسل وبالخط 
بح (عg1‏ 
الفاق اما ن عافن مر علي رى كاف السرره اة 


Dash- dot-dot _.-._.........s 
H ull 


Insıde-framEe 


لدينا سبعة انواع من الاقلام كيف نختار هذه الاقلام , العمليه سهله جدا تابع معى المثال التالى : 
ابدأ بتعريف السطح 
ابدا بتعریف القلم وتحدید لونه وسمكه 


Public Penl As New System.Drawing.Pen (Color.Darkblue, 10) 


اما الان يمكنك ان تختار ای قلم سترسم به : 
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Pen1.DashStyle = Drawing2D.DashStyle.DashDot 
الان فقط اختار مايحلو لك من الاقلام لترسم بها , واريد ان الفت انتباهك الى انك يمكن ان تقوم‎ 
: بعفل مور لے الخطوط گمافے نکر الال‎ 


Pen1l.LineJoin = Drawing2D.LineJoin. Bevel 
. وسوف اترك لك هذا الكود لتتعرف على التأثيرات على خطوط القلم فهى سهله جدا‎ 


٠ او المؤثرات هذه كما فى الكود‎ 
Pen1.DashPattern = New Single 0) {4.0F, 2.0F, 1.0F, 3.0F} 


طبعا ٣2)٥0‏ طیه5 عباره عن خطوط مزخرفه 
الى هنا قد تعرفنا على الاقلام ومؤثراتها ننتقل الى الاجمل والجمل من كل ماسبق وهو : 
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توجد ثلاثة طرق لاختيار الالوان فى الفيجوال بيسيك : 

Qbcolor . 

Default . 

Rgpb .‏ 
النظام الاول وهو معروف لدى مبرمجى البيسيك 6 وهو عباره عن 16 لون تقريبا الالوان 
الاساسيه السائدة الاستخدام , 
الثانى وهو المعروف فى الدوت نت وهو نظام افتراضى للالوان او الوان ثابته برمجيا 
بمعنى انها الوان جاهزه فقط يمكنك ان تختار اللون المناسب بدون تدخل منك فى تكوين 
اللون , وتظهر هذه الالوان عند كتابتك لكلمة . امع ستظهر لك قائمه بالالوان 
الافتراضيه او الجاهزه فى الدوت نت . 
اما النظام التالث وهو Rgb‏ 1 
وهو اختصlر Blue, Green , Red‏ 
هذه الالوان الثلاثه يمكنك من خلال تركيبها او خلطها الى تكوين باقى الالوان !!!! 


ساقول لك : 

کل لون من الالوان الثلاثه له درجه اضاءه تبدا من الصفر وتنتهی عند 255 

أت أن اللرن الأحر لى درخة اضاءته ضفرا فان هذا يت إن لن لخر مكون قدا 
بدرجه عاليه ويكاد لايظهر, وتظهر باقى الالوان الثلاثه بدرجاتها . 

لنری متلا : 

نفترض انك تريد رسم دائره باللون الاحمر فقط الاحمر الغامق : 

فان الکود سیکون کالتالى 

اولا يجب ان تحجز متغير من النوع الوان 


Dim coll As New Color 
EOLL =COLOE.EFEOMAEIOD(255, 255; O, 0) 


السطر الاول عباره عن اسم المتغير من النوع إoإهع‏ 
لسطر الثانى وهو اختيار النظام طع۸ للمتغير 11هء وهذا المتغير يحمل اربعة ارقام 
کالتالی : 
وهو درجة الشفافيه للون وهى الان اعلى درجه للشفافيه اى ان المتغير 
سيظهر بشكل طبيعى بدون ان يكون شفافا ويمكنك تغيير درجة الشفافيه من الصفر 
حتی 255 درجه . 
وهى درجة اللون الاحمر 
وهى درجة اللون الاخضر 
وهى درجة اللون الازرق 
انت الان قمت بحجز متغير من النوع الوان باللون الاحمر الغامق بدون ان يكون شفافا . 
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ثانيا : 


سنحجز متغير من النوع فرشاه عاديه مثلا , نستخدم فى هذه الفرشاه الالوان التى سبق 
حجزنا متغیر بها (011ء) . 


Dim bru As New System.Drawing.SolidBrush (col1) 
٠ ثالثا‎ 
: سنرسم دائره ونلونها باللون الذی اخترناه (011ء)‎ 
Gra.FillEllipse (bru, 0, 0, 200, 200) 
اعتقد انك ستجرب الان درجة الشفافيه للالوان , ويظهر تأثير هذه الشفافيه عندما ترسم عدة‎ 
. رسومات فوق بعضها فستجد ان الالوان الشفافه تظهر اللاشكال المرسومه خلفها‎ 
. جرب الالوان وجرب تركيب الالوان وستجد انها ممتعه جدا‎ 
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